<template>
    <div class="fxn-detail-info">
        <div class="info-title">
            <div class="title">基本资料</div>
        </div>
        <div class="info-wrap">
            <el-descriptions :column="3" border>
                <el-descriptions-item label="案件名称">{{detailData.title}}</el-descriptions-item>
                <el-descriptions-item label="我方当事人">{{detailData.name}}</el-descriptions-item>
                <el-descriptions-item label="对方当事人">{{detailData.priority}}</el-descriptions-item>
                <el-descriptions-item label="案由">{{$filter.formatData(detailData.business_type, 'business_type')}}</el-descriptions-item>
                <el-descriptions-item label="业务地区">{{$filter.formatData(detailData.area, 'business_area')}}</el-descriptions-item>
                <el-descriptions-item label="案件编号">{{detailData.case_no}}</el-descriptions-item>
                <el-descriptions-item label="案件状态">{{$filter.formatData(detailData.status,state)}}</el-descriptions-item>
                <el-descriptions-item label="归档状态">{{detailData.close_status == 1 ? '未归档' : '已归档'}}</el-descriptions-item>
                <el-descriptions-item label="委托阶段">{{formatStage(detailData.entrust_stage)}}</el-descriptions-item>
                <el-descriptions-item label="诉讼标的额">{{detailData.target_amount}}</el-descriptions-item>
                <el-descriptions-item label="合同金额">{{detailData.contract_amount}}</el-descriptions-item>
                <el-descriptions-item label="承办人员">{{detailData.lawyer_name}}</el-descriptions-item>
                <el-descriptions-item label="更新时间">{{$filter.dateTime(detailData.update_time,1)}}</el-descriptions-item>
                <el-descriptions-item label="创建时间">{{$filter.dateTime(detailData.create_time,1)}}</el-descriptions-item>
                <el-descriptions-item label="创建人">{{detailData.create_with}}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions :column="1" border>
                <el-descriptions-item label="移交证据">{{detailData.evidence}}</el-descriptions-item>
                <el-descriptions-item label="案件情况">{{detailData.description}}</el-descriptions-item>
                <el-descriptions-item label="附件">
                    <span v-for="(list,key) in detailData.files" :key="key">
                        <i v-if="list.xext == 'jpg' || list.xext == 'png'" class="iconfont icon-picture fxn-ft-24" @click="handleFile(list.xurl)"></i>
                        <i v-if="list.xext == 'pdf'" class="iconfont icon-pdf fxn-ft-24" @click="handleFile(list.xurl)"></i>
                        <i v-if="list.xext == 'docx' || list.xext == 'xlsx' || list.xext == 'pptx'" class="iconfont icon-document fxn-ft-24" @click="handleFile(list.xurl)"></i>
                        <el-icon v-if="list.xext == 'rar' || list.xext == 'zip'" size="24" @click="handleFile(list.xurl)"><Files /></el-icon>
                    </span>
                </el-descriptions-item>
            </el-descriptions>
        </div>
        <!-- 基本资料 End -->
        <div class="info-title">
            <div class="title">归档记录</div>
        </div>
        <div class="info-wrap">
            <el-table v-loading="loading" :data="closesData" border>
                <el-table-column label="归档状态" prop="status">
                    <template #default="scope">
                    {{scope.row.status == 1 ? '未归档' : '已归档'}}
                    </template>
                </el-table-column>
                <el-table-column label="归档编号" prop="number" />
                <el-table-column label="归档时间" prop="create_time">
                    <template #default="scope">
                        {{$filter.dateTime(scope.row.create_time,1)}}
                    </template>
                </el-table-column>
                <el-table-column label="操作人" prop="create_with" />
            </el-table>
        </div>
        <!-- 归档记录 End -->
    </div>
</template>

<script>
    import { defineComponent, reactive, getCurrentInstance, onMounted, toRefs, computed } from 'vue'
    import { useRouter } from 'vue-router'
    import { useStore } from 'vuex'
    export default defineComponent({
        name: '',
        props: {
            detailData: {
                type: Object,
                default: {},
            },
            closesData: {
                type: Array,
                default: [],
            }
        },
        setup() {
            const { proxy } = getCurrentInstance();
            const router = useRouter();
            const store = useStore();

            //初始化数据
            const state = reactive({
                state: router.currentRoute.value.query.type,
                loading: false,
                listData: [],
            })

            //打开附件
            const handleFile = (file) => {
                window.open(file);
            }

            //格式化委托阶段
            const formatStage = (item) => {
                if(item){
                    let array = item.split(',');
                    let entrust_stage = store.state.configAll.entrust_stage;
                    if(entrust_stage){
                        //匹配相同的数据
                        let b = entrust_stage.filter((item)=> {
                            if(array.indexOf(item.name) > -1){
                                return item.value
                            }
                        })
                        //格式化数据
                        let arr = [];
                        for(let key in b){
                            arr.push(b[key].value)
                        }
                        return String(arr)
                    }
                }
            }
            
            //Dom加载
            onMounted(()=>{
                
            })
            
            return {
                ...toRefs(state),
                
                //请求方法
                
                //组件方法
                handleFile,
                formatStage,
            }

        },
    })
</script>

<style scoped>
    .fxn-detail-info{
        margin-top: 20px;
    }

    .fxn-detail-info .info-title{
        margin: 20px 0;
        overflow: hidden;
    }

    .fxn-detail-info .info-title .title{
        float: left;
        color: rgba(46, 60, 179, .9);
        font-weight: bold;
        text-indent: 12px;
        position: relative;
    }

    .fxn-detail-info .info-title .title::after{
        content: '';
        position: absolute;
        left: 0;
        top: 11px;
        width: 4px;
        height: 10px;
        background: rgba(46, 60, 179, .9);
    }

    .fxn-detail-info .info-title .btn{
        float: right;
    }

    .fxn-detail-info .info-wrap{
        overflow: hidden;
    }
</style>